<template>
  <div id="capture-target">
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-1">
            <div class="grid-cont-right">
              <div class="grid-num">{{ userCount }}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-2">
            <div class="grid-cont-right">
              <div class="grid-num">{{ goodsCount }}</div>
              <div>基地总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-3">
            <div class="grid-cont-right">
              <div class="grid-num">{{ orderCount }}</div>
              <div>课程数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-4">
            <div class="grid-cont-right">
              <div class="grid-num">{{ reminderCount }}</div>
              <div>今天预约数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3 style="margin-bottom: 20px">今天培训完成情况</h3>
        <div class="cav-info" style="background-color: white">
          <div class="container" ref="userSex"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 style="margin-bottom: 20px">近12月所得利润分布</h3>
        <div class="cav-info" style="background-color: white">
          <div class="container" ref="songStyle"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3 style="margin: 20px 0">近5年利润分布</h3>
        <div class="cav-info" style="background-color: white">
          <div class="container" ref="singerSex"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 style="margin: 20px 0">近7天所得利润分布</h3>
        <div class="cav-info" style="background-color: white">
          <div class="container" ref="country"></div>
        </div>
      </el-col>
    </el-row>
  </div>
  <br>
  <el-button type="primary"  @click="captureScreen">AI分析</el-button>
  <br>
  <br>
      <div v-loading="loading" class="answer" v-html="md.render(markdownContent)"></div>
  <br>
  <br>
  
</template>


<script setup name="Index">
const processMarkdown = (content) => {
  const lines = content.split('\n');
  let processedLines = [];

  lines.forEach((line) => {
    if (line.trim() !== '') {
      processedLines.push(line);
    }
  });

  // 在每段文本前添加两个空格
  processedLines = processedLines.map(line => line.trim().length > 0 ? '  ' + line : line);

  return processedLines.join('\n');
};



import MarkdownIt from 'markdown-it'
const md = new MarkdownIt()
const markdownContent=ref("")
import html2canvas from "html2canvas";
import { uploadFileRequest } from "@/stores/api";
import { getRequest } from "@/stores/ai";
const url = ref("https://shzzz.oss-cn-hangzhou.aliyuncs.com/aaa.png");
const loading=ref(false)
const captureScreen = async () => {
  loading.value=true
  // 获取需要截屏的元素
  const element = document.getElementById("capture-target");

  // 使用 html2canvas 进行截图
  html2canvas(element).then((canvas) => {
    // 将 canvas 转换成图片链接
    const imgDataUrl = canvas.toDataURL("image/png");

    // 将 dataURL 转换成 Blob
    const blob = dataUrlToBlob(imgDataUrl);

    let formdata = new FormData();
    formdata.append("file", blob, "aaa.png"); // 假设 item.raw 是文件对象
    uploadFileRequest("/upload/img", formdata).then((resq) => {
      console.log(resq.data);
      let url = "/ai/mutil?image=" + resq.data;
      getRequest(url).then((res) => {
        console.log(res);
        markdownContent.value=processMarkdown(res.data);
        loading.value=false
      });
    });
  });
};

const dataUrlToBlob = (dataUrl) => {
  const parts = dataUrl.split(";base64,");
  const contentType = parts[0].split(":")[1];
  const base64Data = parts[1];

  const byteCharacters = atob(base64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
    const slice = byteCharacters.slice(offset, offset + 1024);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  return blob;
};

// 将 Blob 转换成 ArrayBuffer
const blobToArrayBuffer = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      if (reader.readyState === FileReader.DONE) {
        resolve(reader.result);
      } else {
        reject(new Error("Failed to read as ArrayBuffer"));
      }
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(blob);
  });
};

import { getCurrentInstance } from "vue";
import { getInfoAPI } from "@/api/info";
import * as echarts from "echarts";
const ctx = getCurrentInstance().ctx;
const getInfo = async () => {
  const res = await getInfoAPI();
  userCount.value = res.userCount;
  // console.log(userCount.value);
  goodsCount.value = res.goodsCount;
  orderCount.value = res.orderCount;
  reminderCount.value = res.reminderCount;

  const isYuList = res.isYuList;
  userSex.series[0].data.push({ value: isYuList[0], name: "已完成" });
  userSex.series[0].data.push({ value: isYuList[1], name: "未完成" });
  const userSexChart = echarts.init(ctx.$refs.userSex);
  userSexChart.setOption(userSex);
  const nianNameList = res.nianNameList;
  const nianList = res.nianList;

  for (let i = 0; i < nianNameList.length; i++) {
    singerSex.series[0].data.push({
      value: nianList[i],
      name: nianNameList[i],
    });
  }

  const singerSexChart = echarts.init(ctx.$refs.singerSex);
  singerSexChart.setOption(singerSex);
  //商品种类分布
  songStyle.xAxis.data = res.yueNameList;
  songStyle.series[0].data = res.yueList;

  const songStyleChart = echarts.init(ctx.$refs.songStyle);
  songStyleChart.setOption(songStyle);

  country.xAxis.data = res.riNameList;
  country.series[0].data = res.riList;
  const countryChart = echarts.init(ctx.$refs.country);
  countryChart.setOption(country);
};

const userCount = ref(0);
const goodsCount = ref(0);
const orderCount = ref(0);
const reminderCount = ref(0);
const userSex = reactive({
  series: [
    {
      type: "pie",
      data: [],
    },
  ],
});
const songStyle = reactive({
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [0, 0, 0, 0, 0],
      type: "bar",
      barWidth: "20%",
    },
  ],
});
const singerSex = reactive({
  series: [
    {
      type: "pie",
      data: [],
    },
  ],
});
const country = reactive({
  xAxis: {
    type: "category",
    data: ["未发货", "暂未配送", "配送中"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [0, 0, 0, 0, 0, 0, 0, 0],
      type: "bar",
      barWidth: "20%",
    },
  ],
});

function setSex(sex, arr) {
  let value = 0;
  const name = sex === 0 ? "男" : "女";
  for (let item of arr) {
    if (sex === item.sex) {
      value++;
    }
  }
  return { value, name };
}
onMounted(() => {
  getInfo();
});

const version = ref("3.8.7");

function goTarget(url) {
  window.open(url, "__blank");
}
</script>

<style scoped lang="scss">
.answer {
  border: 1px solid #ccc;
  padding: 1em;
  background-color: #f9f9f9;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.answer h1,
.answer h2,
.answer h3,
.answer h4,
.answer h5,
.answer h6 {
  margin-bottom: 0.5em;
}

.answer p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.answer code {
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 4px;
}

.answer pre {
  background-color: #f5f5f5;
  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
}

.answer blockquote {
  border-left: 4px solid #e0e0e0;
  padding-left: 1em;
  margin-left: 1em;
  color: #666;
}

.answer ul,
.answer ol {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 2em;
}

.answer a {
  color: #007bff;
  text-decoration: none;
}

.answer a:hover {
  text-decoration: underline;
}













.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

// addddddddddddddddddddddddddddddddddddddddddddddddddddddd
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 0 auto;
  position: relative;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.cav-info {
  border-radius: 6px;
  overflow: hidden;
}
.container {
  height: 300px;
}
</style>

